<template>
  <div>
    <h2>这是user组件</h2>
    <input type="text" placeholder="请输入要访问的用户id" v-model="id">
    <button @click="toUser">toUser</button>
    <br>
    <br>
    <br>
    <router-view></router-view>
    <!--<hr>-->
    <!--<UserDetail id="1999" name="zdy" age="90"></UserDetail>-->
  </div>
</template>

<script>
    import UserDetail from "./UserDetail.vue"
    export default {
        name: "user",
        data(){
          return {
            id:""
          }
        },
        components:{
          UserDetail
        },
        mounted(){
          // console.log("user_mounted")
        },
        methods:{
          toUser(){
            // this.$router.push(`/user/${this.id}?name=damu&age=18`)


            //如果使用对象的形式进行编程式导航的跳转
            //一定要注意 path 和 params不能同时出现
            //如果要使用params配置 就的使用命名式路由
            this.$router.push({
              //path:`/user`,
              name:"userDetail",
              params:{
                id:this.id
              },
              query:{
                name:"damu2",
                age:182
              }
            })
          }
        }
    }
</script>

<style scoped>

</style>
